<template>
  <el-carousel height="550px" arrow="always" id="carousel">
    <el-carousel-item v-for="img in imgs" :key="img.id">
      <el-image class="carousel-item" :src="img.src" :alt="img.name" style="height: 550px"/>
    </el-carousel-item>
  </el-carousel>
</template>

<script>
export default {
  name: "Carousel",
  data() {
    return {
      imgs: [
        {
          name: 'LuoTianYi',
          id: 1,
          src: this.getImageUrl('lty.1')
        },
        {
          name: 'LuoTianYi',
          id: 2,
          src: this.getImageUrl('lty.2')
        },
        {
          name: 'LuoTianYi',
          id: 3,
          src: this.getImageUrl('lty.3')
        },
        {
          name: 'LuoTianYi',
          id: 4,
          src: this.getImageUrl('lty.4')
        },
        {
          name: 'LuoTianYi',
          id: 5,
          src: this.getImageUrl('lty.5')
        }
      ],
    }
  },methods: {
    getImageUrl(name) {
      return new URL(`../static/imgs/${name}.jpg`, import.meta.url).href
    },
  }
}
</script>

<style scoped>

</style>